<template>
	<div class="adm-page" :class="skin" :style="{backgroundImage: 'url(' + bg + ')'}">
		<Head @getData="getData" />
		<div class="bs-panel">
			<div class="bs-filter flex">
				<div class="fil-label">办案中心类型：</div>
				<div class="flex_bd">
					<el-radio-group v-model="styleV" size="small" @change="change">
						<el-radio v-for="(item,index) in filstyles" v-show="index < filshow" :key="index"
							:label="item.value" border>{{item.title}}</el-radio>
					</el-radio-group>
				</div>
				<div class="fil-select" @click="filToggle">
					<div v-if="filshow == 10"><span>展开</span><span class="el-icon-arrow-down"></span></div>
					<div v-else><span>收起</span><span class="el-icon-arrow-up"></span></div>
				</div>
			</div>
			<div class="bs-filter flex-center">
				<div class="fil-label">其他选项：</div>
				<div class="flex_bd flex-center fil-form">
					<el-form size="small" :inline="true" ref="form" :model="form">
						<el-form-item label="作者">
							<el-select v-model="form.author" placeholder="请选择">
								<el-option label="不限" value="1"></el-option>
								<el-option label="区域一" value="2"></el-option>
								<el-option label="区域二" value="3"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="好评度">
							<el-select v-model="form.raty" placeholder="请选择">
								<el-option label="不限" value="1"></el-option>
								<el-option label="区域一" value="2"></el-option>
								<el-option label="区域二" value="3"></el-option>
							</el-select>
						</el-form-item>
					</el-form>
				</div>
				<div class="fil-button">
					<el-button size="small" type="primary">查询</el-button>
					<el-button size="small" type="default">清空</el-button>
				</div>
			</div>
		</div>
		<div class="bs-panel">
			<div class="bs-panel_bd">
				<ul class="user-data user-lg-data flex-center">
					<li class="flex-col">
						<div class="value"><span class="v">56</span>个</div>
						<div class="txt">审核中</div>
					</li>
					<li class="line"></li>
					<li class="flex-col">
						<div class="value"><span class="v">6</span>个</div>
						<div class="txt">未通过</div>
					</li>
					<li class="line"></li>
					<li class="flex-col">
						<div class="value"><span class="v">8</span>个</div>
						<div class="txt">今日发布</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="sus-main flex">
			<div class="sus-bar">
				<div class="handle-list clear">
					<div class="handle-list-card" v-for="(item,index) in handleList" :key="index" @click="handTab(index)" :class="hActive == index?'active':''">
						<div class="ha-head flex-center">
							<img src="../../assets/images/er/sxt.png" ><span>XXXXXXX小区东门出口</span>
						</div>
						<div class="ha-body flex-center">
							<div class="ha-pic">
								<img :src="item.pic" >
							</div>
							<div class="flex_bd">
								<div class="item">位置：东门出口</div>
								<div class="item">日期：2021-10-10</div>
								<div class="item">时间：18:25:50</div>
								<div class="item">事件：社区户主</div>
								<div class="item">姓名：张三</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="flex_bd">
				<div class="handle-list-card">
					<div class="ha-head flex-center">
						<img src="../../assets/images/er/home.png" ><span>206机房</span>
					</div>
					<div class="ha-body flex-center">
						<div class="ha-pic">
							<img src="../../assets/images/er/mk.png">
						</div>
						<div class="flex_bd flex-center">
							<div class="ha-items">
								<div class="item">位置类型：机房</div>
								<div class="item">安全等级：3级</div>
								<div class="item">资产数量：206</div>
							</div>
							<div class="ha-items">
								<div class="item">责任人：张三</div>
								<div class="item">值守情况：无人值守</div>
								<div class="item">双路电源：具备</div>
							</div>
							<div class="ha-items">
								<div class="item">UPS信息：<el-link>查看</el-link></div>
								<div class="item">空调信息：<el-link>查看</el-link></div>
								<div class="item">是否防雷：是</div>
							</div>
						</div>
					</div>
				</div>
				<div class="bs-panel sus-tabs">
					<el-tabs v-model="activeName" >
						<el-tab-pane label="资产总" name="a">
						</el-tab-pane>
						<el-tab-pane label="3D机" name="b">
							<div class="sus-content">
								<img src="../../assets/images/er/lg.png" >
							</div>
						</el-tab-pane>
						<el-tab-pane label="资产清" name="c">
						</el-tab-pane>
						<el-tab-pane label="安全测" name="d">
						</el-tab-pane>
					</el-tabs>
				</div>
				<div class="bs-panel sus-tabs">
					<el-tabs v-model="activeName2" >
						<el-tab-pane label="资产总览" name="a">
						</el-tab-pane>
						<el-tab-pane label="资产清单" name="b">
							<el-row :gutter="20">
								<el-col :span="6" v-for="item in lists" :key="item">
									<el-popover
										placement="right"
										width="400"
										trigger="click">
										<div class="de-detail">
											<div class="item-title">OA办公平台</div>
											<div class="text item">OA办公平台</div>
											<div class="text item">OA办公平台</div>
											<div class="text item">OA办公平台</div>
											<div class="text item">OA办公平台</div>
											<div class="text item">OA办公平台</div>
											<div class="text item">OA办公平台</div>
											<div class="text item">OA办公平台</div>
										</div>
										<div class="delist-card" slot="reference">
											<div class="title">{{item.title}}</div>
											<div class="items flex-center">
												<div class="item">OA办公平台</div>
												<div class="item">192.168.1.12</div>
											</div>
											<div class="sf-end">
												<div class="hd">安全风险</div>
												<div class="sf-nums flex-center" v-if="item.status">
													<div class="num num-lg-red">11</div>
													<div class="num num-red">22</div>
													<div class="num num-orange">33</div>
													<div class="num num-yellow">44</div>
													<div class="num num-green">44</div>
												</div>
												<div v-else class="sf-tip">未发现风铃信息</div>
											</div>
										</div>
									</el-popover>
								</el-col>
							</el-row>
						</el-tab-pane>
					</el-tabs>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				hActive:0,
				activeName:'b',
				activeName2:'b',
				styleV: "1",
				filshow: 10000,
				filstyles: [{
						title: '全部',
						value: '1',
					},
					{
						title: '类目一',
						value: '2',
					},
					{
						title: '类目二',
						value: '3',
					},
					{
						title: '类目三',
						value: '4',
					},
					{
						title: '类目四',
						value: '5',
					},
					{
						title: '类目五',
						value: '6',
					},
					{
						title: '类目六',
						value: '7',
					},
					{
						title: '类目七',
						value: '8',
					},
					{
						title: '类目八',
						value: '9',
					},
					{
						title: '类目九',
						value: '10',
					},
					{
						title: '类目十',
						value: '11',
					},
					{
						title: '类目十一',
						value: '12',
					},
					{
						title: '类目十二',
						value: '13',
					},
				],
				form: {
					author: '1',
					raty: '1',
				},
				handleList: [{
						title:'XXXXXXX小区东门出口',
						pic: require('../../assets/images/er/mk.png')
					},{
						title:'XXXXXXX小区东门出口',
						pic: require('../../assets/images/er/tk.png')
					},{
						title:'XXXXXXX小区东门出口',
						pic: require('../../assets/images/er/mk.png')
					},{
						title:'XXXXXXX小区东门出口',
						pic: require('../../assets/images/er/mk.png')
					},{
						title:'XXXXXXX小区东门出口',
						pic: require('../../assets/images/er/mk.png')
					},{
						title:'XXXXXXX小区东门出口',
						pic: require('../../assets/images/er/mk.png')
					}
				],
				lists: [{
						title: '机架式服务器',
						status:true
					},{
						title: '应用软件',
						status:true
					},{
						title: '中间件',
						status:false
					},{
						title: '中间件',
						status:false
					},
				],
				bg: require('../../assets/images/bg4.jpg'),
				skin: "skin3"
			}
		},
		mounted() {
			this.drawLine();
			this.drawLine2();
		},
		methods: {
			getData(data1, data2) {
				this.bg = data1
				this.skin = data2
			},
			handTab(index){
				this.hActive = index
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
				});
				setTimeout(() => {
				loading.close();
				}, 2000);
			},
			change(e) {
				console.log(e)
			},
			filToggle() {
				if (this.filshow == 10) {
					this.filshow = 10000
				} else {
					this.filshow = 10
				}
			},
		}
	}
</script>
